<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t">
  <ng-container *ngIf="model$ | async as vm">
    <div class="story-header">
      <div class="start">
        <ng-container *ngIf="vm.selectedStoryView === 'full-view'">
          <a
            href="#"
            class="workflow"
            >{{ vm.story.workflow.name }}</a
          >
          <tui-svg
            aria-hidden="true"
            class="chevron-right-icon"
            src="chevron-right"></tui-svg>
        </ng-container>
        <span
          #storyRef
          tabindex="0"
          [attr.aria-label]="
            t('story.story_sr', {
              storyRef: vm.story.ref,
              storyTitle: vm.story.title
            })
          "
          class="story-ref story-detail-focus"
          [innerHtml]="t('story.story', { storyRef: vm.story.ref })"></span>
        <button
          [attr.aria-label]="t('story.copy_story')"
          [icon]="linkCopied ? 'check' : 'link'"
          appearance="action-button-2"
          [class.copied]="linkCopied"
          class="copy-link"
          tuiIconButton
          [tgUiTooltip]="
            linkCopied ? t('story.link_copied') : t('story.click_to_copy')
          "
          [tgManual]="hintShown"
          type="button"
          (click)="getStoryLink()"
          (mouseenter)="displayHint()"
          (focus)="displayHint()"
          (focusout)="resetCopyLink('fast')"
          (mouseleave)="resetCopyLink('slow')"></button>
      </div>
      <div
        class="end"
        [class.no-close]="vm.selectedStoryView === 'full-view'">
        <button
          #previousStory
          [disabled]="!vm.story.prev"
          [attr.aria-label]="
            vm.story.prev
              ? t('story.previous_story', {
                  story: vm.story.prev!.title
                })
              : null
          "
          icon="chevron-left"
          appearance="tertiary"
          class="story-navigation-arrow"
          tuiIconButton
          tgUiTooltipPosition="top-right"
          [tgUiTooltip]="t('story.previous')"
          (click)="navigateToPreviousStory(vm.story.prev!.ref)"
          type="button"></button>
        <button
          #nextStory
          [disabled]="!vm.story.next"
          [attr.aria-label]="
            vm.story.next
              ? t('story.next_story', {
                  story: vm.story.next!.title
                })
              : null
          "
          icon="chevron-right"
          appearance="tertiary"
          class="story-navigation-arrow"
          tuiIconButton
          tgUiTooltipPosition="top-right"
          [tgUiTooltip]="t('story.next')"
          (click)="navigateToNextStory(vm.story.next!.ref)"
          type="button"></button>

        <tui-hosted-dropdown
          [tuiDropdownAlign]="'right'"
          [content]="changeView"
          [(open)]="dropdownState">
          <button
            role="menu"
            aria-haspopup="true"
            [attr.aria-expanded]="dropdownState"
            tabindex="0"
            [attr.aria-label]="
              t('story.change_view_sr', {
                currentView: t(getCurrentViewTranslation)
              })
            "
            [icon]="vm.selectedStoryView"
            appearance="tertiary"
            class="change-view"
            tuiIconButton
            type="button"
            tgUiTooltipPosition="top-right"
            [tgUiTooltip]="t('story.change_view')"
            (click)="(!dropdownState)"></button>
        </tui-hosted-dropdown>
        <tui-hosted-dropdown
          [tuiDropdownAlign]="'right'"
          [content]="storyOptions"
          [(open)]="storyOptionsState">
          <button
            role="menu"
            aria-haspopup="true"
            [attr.aria-expanded]="storyOptionsState"
            tabindex="0"
            [attr.aria-label]="t('story.story_actions')"
            [tgUiTooltip]="t('story.story_actions')"
            tgUiTooltipPosition="top-right"
            icon="more-vertical"
            data-test="story-options"
            appearance="tertiary"
            tuiIconButton
            type="button"
            (click)="(storyOptionsState)"></button>
        </tui-hosted-dropdown>
        <button
          *ngIf="vm.selectedStoryView !== 'full-view'"
          [attr.aria-label]="t('story.close')"
          icon="close"
          appearance="action-button"
          (click)="closeStory.next()"
          tuiIconButton
          class="close-button"
          [tgUiTooltip]="t('story.close')"
          tgUiTooltipPosition="top-right"
          type="button"></button>
      </div>
      <ng-template #changeView>
        <tui-data-list
          class="view-options-list"
          [attr.aria-label]="t('story.change_view')">
          <button
            *ngFor="let viewOption of storyViewOptions; trackBy: trackByIndex"
            role="menuitem"
            [attr.aria-checked]="viewOption.id === vm.selectedStoryView"
            class="option-btn"
            [class.selected]="viewOption.id === vm.selectedStoryView"
            tuiOption
            type="button"
            (click)="selectStoryView(viewOption.id)">
            <div class="option-container">
              <tui-svg
                aria-hidden="true"
                class="option-icon"
                [src]="viewOption.id"></tui-svg>
              <span class="option-name">{{ t(viewOption.translation) }}</span>
            </div>
            <span class="shortcut">{{ t('story.ctrl_x') }}</span>
          </button>
        </tui-data-list>
      </ng-template>
      <ng-template #storyOptions>
        <tui-data-list
          class="story-options-list"
          data-test="story-options-list"
          [attr.aria-label]="t('story.story_actions')">
          <button
            role="menuitem"
            data-test="delete-story-button"
            class="option-btn"
            *hasPermission="['delete']; entity: 'story'"
            tuiOption
            type="button"
            (click)="deleteStoryConfirmModal()">
            <div class="option-container">
              <tui-svg
                aria-hidden="true"
                class="option-icon"
                src="trash"></tui-svg>
              <span class="option-name">{{
                t('story.delete.delete_story')
              }}</span>
            </div>
          </button>
        </tui-data-list>
      </ng-template>
    </div>
  </ng-container>
</ng-container>
